import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:nyh_motorcade_app/entity/energy_type_entity.dart';
import 'package:nyh_motorcade_app/styles/colors.dart';
import 'package:nyh_motorcade_app/widgets/custom_app_bar.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:nyh_motorcade_app/widgets/custom_text_field.dart';
import 'package:nyh_motorcade_app/widgets/text_button_with_icon.dart';
import 'add_card_controller.dart';

class AddCardPage extends StatelessWidget {
  final controller = Get.put(AddCardController());

  @override
  Widget build(BuildContext context) {
    return GetBuilder<AddCardController>(
      builder: (controller) {
        return Scaffold(
          resizeToAvoidBottomInset: false,
          backgroundColor: Colours.color_background,
          appBar: CustomAppBar(
            context: context,
            title: controller.isAddCard ? "开卡" : "卡信息",
          ),
          body: Column(
            children: [
              Expanded(
                child: SingleChildScrollView(
                  physics: BouncingScrollPhysics(),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        color: Colours.color_white,
                        margin: EdgeInsets.only(top: 12.w),
                        padding: EdgeInsets.only(left: 16.w, right: 10.w),
                        height: 48.w,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text(
                              "卡归属",
                              style: TextStyle(
                                color: Colours.color_text_theme,
                                fontSize: 14.sp,
                              ),
                            ),
                            TextButtonWithIcon(
                              onPressed: () {
                                controller.changeCardType();
                              },
                              icon: Image.asset("images/ic_change.png"),
                              label: Text(
                                controller.isUserCard ? "自有卡" : "外协卡",
                                style: TextStyle(
                                  color: Colours.color_text_theme,
                                  fontSize: 14.sp,
                                ),
                              ),
                              textIconPadding: 8.w,
                              iconTextAlignment: IconTextAlignment.iconRightTextLeft,
                            ),
                          ],
                        ),
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(horizontal: 16.w),
                        color: Colours.color_white,
                        height: 48.w,
                        child: Row(
                          children: [
                            Row(
                              mainAxisSize: MainAxisSize.min,
                              children: [
                                Text(
                                  "*",
                                  style: TextStyle(
                                    color: Colours.color_ff3b30,
                                    fontSize: 14.sp,
                                  ),
                                ),
                                Text(
                                  "卡名称",
                                  style: TextStyle(
                                    color: Colours.color_text_theme,
                                    fontSize: 14.sp,
                                  ),
                                ),
                              ],
                            ),
                            SizedBox(
                              width: 16.w,
                            ),
                            Expanded(
                              child: CustomTextField(
                                "请输入卡名称",
                                controller: controller.cardNameController,
                                focusNode: controller.cardNameFocus,
                                hintStyle: TextStyle(color: Colours.color_cfcfd5, fontSize: 14.sp),
                                textStyle: TextStyle(color: Colours.color_text_theme, fontSize: 14.sp),
                                textAlign: TextAlign.right,
                                contentPadding: EdgeInsets.symmetric(vertical: 15),
                                inputFormatters: [
                                  LengthLimitingTextInputFormatter(15),
                                ],
                                onChanged: (value) {
                                  controller.setCardName(value);
                                },
                              ),
                            ),
                          ],
                        ),
                      ),
                      Container(
                        color: Colours.color_white,
                        padding: EdgeInsets.only(left: 16.w, right: 10.w),
                        height: 48.w,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Row(
                              mainAxisSize: MainAxisSize.min,
                              children: [
                                Text(
                                  "*",
                                  style: TextStyle(
                                    color: Colours.color_ff3b30,
                                    fontSize: 14.sp,
                                  ),
                                ),
                                Text(
                                  "能源类型",
                                  style: TextStyle(
                                    color: Colours.color_text_theme,
                                    fontSize: 14.sp,
                                  ),
                                ),
                              ],
                            ),
                            TextButtonWithIcon(
                              onPressed: () {
                                showEnergyTypeDialog();
                              },
                              icon: Image.asset(
                                "images/ic_arrow_right_gray.png",
                                color: Colours.color_text_theme,
                              ),
                              label: Text(
                                controller.energyType.isNotEmpty ? controller.energyTypeName : "请选择",
                                style: TextStyle(
                                  color: Colours.color_text_theme,
                                  fontSize: 14.sp,
                                ),
                              ),
                              textIconPadding: 8.w,
                              iconTextAlignment: IconTextAlignment.iconRightTextLeft,
                            ),
                          ],
                        ),
                      ),
                      Container(
                        padding: EdgeInsets.only(left: 16.w, right: 14.w),
                        color: Colours.color_white,
                        height: 48.w,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text(
                              "启用状态",
                              style: TextStyle(
                                color: Colours.color_text_theme,
                                fontSize: 14.sp,
                              ),
                            ),
                            CupertinoSwitch(
                              value: controller.state,
                              activeColor: Colours.color_theme,
                              trackColor: Colours.color_cfcfd5,
                              onChanged: (value) {
                                controller.changeState(value);
                              },
                            ),
                          ],
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.symmetric(vertical: 12.w),
                        padding: EdgeInsets.symmetric(vertical: 17.w, horizontal: 16.w),
                        color: Colours.color_white,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              "备注",
                              style: TextStyle(
                                color: Colours.color_text_theme,
                                fontSize: 14.sp,
                              ),
                            ),
                            SizedBox(
                              height: 17.w,
                            ),
                            CustomTextField(
                              "请填写您的备注内容",
                              controller: controller.remarksController,
                              focusNode: controller.remarksFocus,
                              hintStyle: TextStyle(color: Colours.color_b7b7c0, fontSize: 14.sp),
                              textStyle: TextStyle(color: Colours.color_text_theme, fontSize: 14.sp, height: 1.5),
                              fillColor: Colours.color_background,
                              borderRadius: BorderRadius.circular(10.w),
                              contentPadding: EdgeInsets.only(left: 16.w, top: 13.w, right: 10.w, bottom: 13.w),
                              inputFormatters: [LengthLimitingTextInputFormatter(50)],
                              onChanged: (value) {
                                controller.setRemarks(value);
                              },
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              Container(
                padding: EdgeInsets.symmetric(vertical: 8.w, horizontal: 16.w),
                color: Colours.color_white,
                child: TextButton(
                  onPressed: () {
                    controller.onConfirm();
                  },
                  child: Text(
                    "确定",
                    style: TextStyle(
                      color: Colours.color_white,
                      fontSize: 16.sp,
                    ),
                  ),
                  style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.resolveWith((states) {
                      return controller.isComplete() ? Colours.color_theme : Colours.color_ffd599;
                    }),
                    overlayColor: MaterialStateProperty.resolveWith((states) {
                      return controller.isComplete() ? Colours.color_theme_deep : Colours.color_ffd599;
                    }),
                    shape: MaterialStateProperty.all(
                      RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(28.w),
                      ),
                    ),
                    minimumSize: MaterialStateProperty.all(Size(double.infinity, 48.w)),
                  ),
                ),
              ),
            ],
          ),
        );
      },
    );
  }

  Future<void> showEnergyTypeDialog() async {
    controller.clearFocus();
    List<EnergyTypeEntity> list = await controller.getEnergyType();
    if (list.isEmpty) {
      return;
    }
    showModalBottomSheet(
      context: Get.context!,
      isScrollControlled: true,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(10.w),
          topRight: Radius.circular(10.w),
        ),
      ),
      builder: (c) {
        return Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            MediaQuery.removePadding(
              removeTop: true,
              removeBottom: true,
              context: Get.context!,
              child: ListView.separated(
                physics: NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                itemCount: list.length,
                itemBuilder: (context, index) {
                  return Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(index == 0 ? 10.w : 0),
                        topRight: Radius.circular(index == 0 ? 10.w : 0),
                      ),
                    ),
                    height: 48.w,
                    child: ClipRRect(
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(index == 0 ? 10.w : 0),
                        topRight: Radius.circular(index == 0 ? 10.w : 0),
                      ),
                      child: Material(
                        color: Colours.color_transparent,
                        child: InkWell(
                          onTap: () {
                            Navigator.pop(c);
                            controller.changeEnergyType(index);
                          },
                          child: Center(
                            child: Text(
                              list[index].dictdataName ?? "",
                              style: TextStyle(
                                color: Colours.color_text_theme,
                                fontSize: 16.sp,
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                  );
                },
                separatorBuilder: (context, index) {
                  return Divider(
                    color: Colours.color_background,
                    height: 1.w,
                    thickness: 1.w,
                  );
                },
              ),
            ),
            Container(
              height: 8.w,
              color: Colours.color_background,
            ),
            Container(
              height: 48.w,
              child: Material(
                child: InkWell(
                  onTap: () {
                    Navigator.pop(c);
                  },
                  child: Center(
                    child: Text(
                      "取消",
                      style: TextStyle(
                        color: Colours.color_9fa0ab,
                        fontSize: 16.sp,
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ],
        );
      },
    );
  }
}
